<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        /* 通过width 百分比来计算列数 */
      .list0 {
        margin: 0px;
        padding: 0px;
        display: flex;
        /* warp 会换行，nowrap不会换行 */
        flex-wrap: wrap;
      }

      .list0 .item {
        list-style: none;
        width: calc(33.33% - 4px);
        height: 100px;
        background-color: slateblue;
        margin: 2px;
      }

      .list {
        margin: 0px;
        padding: 0px;
        display: flex;
        /* warp 会换行，nowrap不会换行 */
        flex-wrap: wrap;
      }

      .list .item {
        list-style: none;

        /* min-width: calc(33.33% - 4px); */
        min-width: 100px;
        width: 100%;
        max-width: calc(33.33% - 4px);
        height: 100px;
        background-color: tomato;
        margin: 2px;
      }
    </style>
  </head>
  <body>
    场景1：九宫格

    <ul class="list0">
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
    </ul>

    场景2：最多3个一行，间隔4px。每个最小100px 屏幕小于300px时，可以换行
    <ul class="list">
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
    </ul>
  </body>
</html>
